<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='550px'  :fullscreen = 'Global.currentDevice'>
        <el-divider></el-divider>
        <el-row>
              <el-col  :xs='24' :lg='20'>
                    <el-form  label-width="120px" align='left' :model="form" ref='form' :rules='rules'  :label-position='Global.dialog_label_Position'>
                            <el-form-item label="项目角色："  prop='entRole' >
                                  <el-select v-model.trim="form.entRole" placeholder="请选择" class='w-100'>
                                          <el-option
                                            v-for="item in charactor"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                          </el-option>
                                  </el-select>
                            </el-form-item>
                            <el-form-item label="企业："  prop='entCode'>
                                  <el-select v-model.trim="form.comp_info"  value-key="code" placeholder="请搜索选择"  filterable   class='w-100' @change='(val)=>company_change(val)'>
                                          <el-option
                                            v-for="item in companyList"
                                            :key="item.code"
                                            :label="item.entName"
                                            :value="{code:item.code,entName:item.entName}">
                                          </el-option>
                                  </el-select>
                                  
                            </el-form-item>
                            <el-form-item label="收费方式："  prop='chargingMethod'>
                                  <el-select v-model.trim="form.chargingMethod"  placeholder="请选择" class='w-100'>
                                          <el-option
                                            v-for="item in pay_list"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                          </el-option>
                                  </el-select>
                            </el-form-item>
                            <el-form-item label="服务费率："  prop='serviceRate'>
                                  <el-input v-model.trim="form.serviceRate" placeholder='' class='inline-input mt6 mr8'><template slot="suffix">%</template></el-input>
                            </el-form-item>
                    </el-form>
              </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取 消</el-button>
              <el-button type="primary" @click="submit('form')">确 定</el-button>
        </div>
        
  </el-dialog>
</template>

<script charset="utf-8" type="text/javascript">
//接口
import { listCompany } from '@/api/company/index'//company
export default {
  name: 'CompanyEdit',
  props:{
      companyList:{
          type:Array,
          default:[]
      }
  },
  data() {
    let validate_com = (rule, value, callback) => {
        value=this.form.comp_info.code
        if (!value) {
          callback(new Error('请选择企业'));
        }  else {
          callback();
        }
    };
    let validate_num = (rule, value, callback) => {
        if(!value){
          callback()
        }
        else if (!Number(value)) {
          callback(new Error('仅允许输入数字'));
        }  else {
          callback();
        }
    };
      
    return {
      loading: false,
      fir_activeName:'first',
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: '添加企业'
      },

      form:{
          entRole:'',
          chargingMethod:'',
          serviceRate:null,
          comp_info:{
              code:'',
              entName:''
          },
      },
      comp_info:{
          code:'',
          entName:''
      },
      rules:{
          entRole:[
            { required:true,message:'请选择项目角色'}
          ],
          entCode:[
            // { required:true},
            { validator: validate_com, trigger: 'change' }
          ],
          chargingMethod:[
            { required:true,message:'请选择收费方式'}
          ],
          serviceRate:[
            {validator: validate_num, trigger: 'change' }
          ]
      },

      //项目角色
      charactor:[
        {value:'1',label:'发行方'},
        {value:'2',label:'担保方'},
        {value:'3',label:'承销方'},
        {value:'4',label:'律所'},
        {value:'5',label:'受托管理方'},
        {value:'6',label:'投资顾问'},
      ],
      company_list:[],
      pay_list:[
        {value:'1',label:'募集款扣款'},
        {value:'2',label:'转账扣款'},
        {value:'3',label:'不收取'},
      ],

      isEdit:false,
      current_index:'',

    }
  },
  created(){
      
    
  },
  methods: {
    submit(formName){

      //先验证表达
      this.$refs[formName].validate(valid => {
          //通过验证后
          // console.log(valid)
          if (valid) {
              if(this.isEdit == false){
                // this.$emit('save-finished',this.form,this.comp_info)  为什么不能直接传form？？？？
                this.$emit('save-finished',{entRole:this.form.entRole,
                                            chargingMethod:this.form.chargingMethod,
                                            serviceRate:this.form.serviceRate},this.form.comp_info)

              }
              else{
                this.$emit('save-finished',{entRole:this.form.entRole,
                                            chargingMethod:this.form.chargingMethod,
                                            serviceRate:this.form.serviceRate},this.form.comp_info,this.current_index)
              }
              
              this.dialogProps.visible=false
            }
        })
    },

    company_change(val){
      // console.log(val == this.comp_info)
      // console.log(this.comp_info)
    },
    cancel(){
      // if(this.isEdit == true){
      //       this.resetForm('form')
      //       this.comp_info={
      //           code:'',
      //           entName:''
      //       }
      //       this.form={
      //         entRole:'',
              
      //         chargingMethod:'',
      //         serviceRate:'',
      //       };
      // }
      this.dialogProps.visible = false
    },

    handleSelect(item) {
      console.log(item);
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openDialog', function() {
        //初始化
        this.dialogProps.visible = true
        this.dialogProps.title='添加企业'
        this.isEdit = false

        //重置表单
        this.resetForm('form')
        // this.comp_info={
        //     code:'',
        //     entName:''
        // }
        this.form={
          entRole:'',
          chargingMethod:'',
          serviceRate:'',
          comp_info:{
              code:'',
              entName:''
          }
        };

        //将编辑数字置为初始
        // this.current_index = ''

        
      })
      this.$on('openEditDialog',function(rowdata,index){

         this.clearValidateForm('form')
          //初始化
          this.dialogProps.visible = true
          this.dialogProps.title='编辑企业'
          this.isEdit = true
          
          //form字段 的值如果是对象  是需要重置的  因为他们值的是地址，不能直接赋值操作，大坑
          this.form.comp_info=
          {
              code:'',
              entName:''
          }
          let proxy = new Proxy(rowdata, {});
          // this.form = proxy  回填数据的时候不能直接赋值


          //回填数据
          [this.form.entRole,this.form.chargingMethod,this.form.serviceRate]=[proxy.entRole,proxy.chargingMethod,proxy.serviceRate];
          [this.form.comp_info.code,this.form.comp_info.entName] = [proxy.entCode,proxy.entName]
          this.current_index = index
      })
    })

  },
  updated(){
    
  },
  components:{
    
  }
}
</script>

<style  scoped>

</style>


